<template>
    <div class="wrap">
        <Table
            :option="mixinOption" 
            :cloumn="cloumn"
            :searchForms="searchForm"
            :data="data"
            :loading="mixinLoading"
            :pageParams="mixinPageOption"
            @handelSearchForm="handelSearchForm"
            @clearSearchForm="clearSearchForm"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            @handleAdd="handleAdd"
            @handleView="handleView"
            @handleEdit="handleEdit"
            >
            <template v-slot:emptySlot>
                <el-form-item  label="水库名" prop="zname">
                    <el-input  clearable v-model="searchForm.zname" placeholder="水库名名称"></el-input>
                </el-form-item>
                <el-form-item  label="故障部位" prop="position">
                    <el-select clearable v-model="searchForm.position">
                        <el-option
                        v-for="(item, index) in typeList"
                        :key="index" 
                        :label="item.value" 
                        :value="item.code"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="维修类型" prop="repairLx">
                    <el-select clearable v-model="searchForm.repairLx">
                        <el-option
                        v-for="(item, index) in typeList01"
                        :key="index" 
                        :label="item.value" 
                        :value="item.code"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="处理状态" prop="state">
                    <el-select clearable v-model="searchForm.state">
                        <el-option
                        v-for="(item, index) in typeList02"
                        :key="index" 
                        :label="item.value" 
                        :value="item.code"> </el-option>
                    </el-select>
                </el-form-item>
            </template> 
        </Table>
        <add @onChange="onChangeAdd" :type="type" :id="editId" :visible="isAddShow"></add>
    </div>
</template>
<script>
import { formatTimestamp } from '@/utils/common'
import commonApi from '@/api/index'
import bbcApi from '@/api/bbc'
import add from './add.vue'

export default {
    name: 'index',
    components: {
        add
    },
    data() {
        return {
            data: [],
             cloumn: [
               
                {
                    prop: 'reservoirName',
                    label: '监测点',
                },
                {
                    prop: 'users',
                    label: '维修人员',
                },
                {
                    prop: 'repairStartTime',
                    label: '开始时间',
                },
                {
                    prop: 'repairEndTime',
                    label: '结束时间',
                },
                {
                    prop: 'positionName',
                    label: '故障部位',
                },
                {
                    prop: 'repairLxName',
                    label: '维修类型',
                },
                {
                    prop: 'repairStateName',
                    label: '维修状态',
                },
                {
                    prop: 'remark',
                    label: '处理情况',
                },
            ],
            statusList:[
                {
                    label:'未备案',
                     class:'tab_no',
                    id:'0'
                },{
                    label:'已备案',
                     class:'tab_yes',
                    id:'1'
                }
            ],
            
            mixinOption: {
                page: true,
                index: true, // 开启索引
                indexTitle: '序号',
                addShow: false,  // 新增按钮
                border: true, // 开启边框,
                handleRowShow: true, //操作栏
                searchBtnShow: true, // 搜索按钮
                emptyBtnShow: true,
                searchHeader: true,
                viewBtnHide: false,
                editBtnHide: false,
                deleteBtnHide: true,
            },
            // 搜索
           
            searchForm: {
                repairLx:'',
                position:'',
                state: '',
                zname:''
            },
            // 下拉数据
            typeList:[],
            typeList01:[],
            typeList02:[],
            typeList03:[],
            reservoirList:[],
            // 新增编辑
            isAddShow:false,
            isDetailShow:false,
            editId:'',
            type:'add',
        }
    },
    watch:{
        // 'searchForm.time'(newValue){
        //     this.searchForm.time = newValue ? formatTimestamp(newValue, 'yyyy-MM-dd') : ''
        // },
    },
    created() {
        // this.getReservoir()
        this.getDict('GZBW')
        this.getDict('WXLX')
        this.getDict('WXZT')
        this.getData()
    },
    mounted() {
    },
    methods: {
        getData() {
            this.mixinLoading = true
            bbcApi.repairFindByPageList({...this.mixinPageOption, ...this.searchForm})
            .then(res => {
                this.mixinLoading = false
                this.data = res.data.records
                this.mixinPageOption.total = res.data.total
            })
            .catch(() => {
                this.mixinLoading = false
            })
        },
        getDict(code){
            commonApi.getByType(code)
                .then(res => {
                    if(code == 'GZBW'){
                        this.typeList = res.data
                    }else if(code == 'WXLX'){
                        this.typeList01 = res.data
                    }else if(code == 'WXZT'){
                        this.typeList02 = res.data
                    }
                    
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },
        getReservoir() {
            bbcApi.stationOptions()
                .then(res => {
                    this.reservoirList = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },
        
        handelDelete(row) {
            
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    bbcApi.deleteInfo(
                        row.stationId
                    )
                    .then(() => {
                        this.$message.success('删除成功')
                        this.getData()
                    })
                    .catch((err) => {
                        this.$message.success(err.message)  
                    })
                }).catch(() => {})
        },
        
        onChangeAdd(data){
            this.isAddShow = data.bool
            if(data.refresh){
                this.getData()
            }
        },

        handleConfirm(item){

        },

        // 新增编辑
        handleAdd(){
            this.isAddShow = true
            this.type = 'add'
            this.editId = ''
        },
        
        handleEdit(item){
            this.isAddShow = true
            this.type = 'edit'
            this.editId = item.id
        },
        // 详情
        handleView(item){
            this.isAddShow = true
            this.type = 'detail'
            this.editId = item.row.id
            // this.$router.push({
            //     name:'implementationDetail',
            //     query:{
            //         id:item.row.id
            //     }
            // })
        },
    }
    
}
</script>
<style lang='scss' scoped>
    .wrap{
        width: calc(100% - 40px);
        height: calc(100% - 20px);
        background: #FFFFFF;
        box-shadow: 0px 0px 14px 0px rgba(214, 214, 214, 0.25);
        border-radius: 6px;
        padding: 10px 20px;
    }
    
</style>